<template>
  <div class="bg-them" :class="theme">
    <transition :name="slide">
      <keep-alive v-if="$route.meta.keepAlive">
        <router-view></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive"></router-view>
    </transition>
  </div>
</template>

<script>
export default {
  name: "App",
  data: function() {
    return {
      slide: "slideLeft",
      theme: "theme-blue",
      themeList: [
        {
          id: 0,
          name: "蓝色",
          className: "theme-blue",
          cock: 1
        },
        {
          id: 1,
          name: "紫色",
          className: "theme-purple",
          cock: 0
        },
        {
          id: 2,
          name: "绿色",
          className: "theme-green",
          cock: 0
        }
      ]
    };
  },
  created() {
    this.getTheme();
  },
  updated() {
    this.$nextTick(function() {});
  },
  mounted: function() {
    console.log(this.$route.path);
  },
  methods: {
    getTheme() {
      if (typeof Storage !== "undefined") {
        if (localStorage.themeList != undefined) {
          let themeList = JSON.parse(localStorage.themeList);
          themeList.forEach(arr => {
            if (arr.cock == 1) {
              this.theme = arr.className;
            }
          });
        } else {
          localStorage.themeList = JSON.stringify(this.themeList);
        }
      } else {
        console.log("localStorage error");
      }
    }
  }
};
</script>


<style scoped>
.slideLeft-leave {
  transform: translateX(0);
}
.slideLeft-leave-active {
  transition: all 0.5s;
  transform: translateX(0);
}
.slideLeft-leave-to {
  transform: translateX(-100%);
}

.slideLeft-enter {
  transform: translateX(100%);
}

.slideLeft-enter-active {
  transition: all 0.5s;
  transform: translateX(100%);
}
.slideLeft-enter-to {
  transform: translateX(0);
}
.bg-them {
  height: 100%;
  position: relative;
}
.theme-blue {
  background: url("./assets/images/theme/bg1.jpg") center no-repeat;
  background-size: cover;
}
.theme-purple {
  background: url("./assets/images/theme/bg2.jpg") center no-repeat;
  background-size: cover;
}
.theme-green {
  background: url("./assets/images/theme/bg3.jpg") center no-repeat;
  background-size: cover;
}
</style>


